<script setup lang="ts">
import { nextTick, ref } from "vue";
import {
  IMenuTree,
  ITableData,
  IFormState,
  FormStateKeys,
} from "@/views/system/menu/types.ts";
import FormItem from "@/components/autoForm/FormItem.ts";
import {
  addOptions,
  formState,
  initFormData,
} from "@/views/system/menu/data.ts";
import { addRow } from "@/api/common";

const emit = defineEmits(["refresh"]);
const modalRef = ref();
const formRef = ref();
const confirmLoading = ref(false);
const types = ref<string>("add");
const menuOptions = ref<IMenuTree[]>([]);
const openAddModal = (
  type: string,
  row: ITableData | null,
  tableData: ITableData[],
) => {
  modalRef.value.openModal();
  menuOptions.value = [];
  const menu: IMenuTree = { menuId: 0, menuName: "主类目", children: [] };
  menu.children = tableData;
  menuOptions.value.push(menu);
  const { menuId } = row || {};
  types.value = type;
  nextTick(() => {
    formRef.value.resetFields();
    if (type === "add") {
      Object.keys(formState).forEach(key => {
        formState[key as FormStateKeys] = initFormData[
          key as FormStateKeys
        ] as never;
      });
      if (menuId) {
        formState.parentId = menuId;
      }
    } else {
      // update
      Object.assign(formState, row);
    }
  });
};
defineExpose({ openAddModal });

const modalCancalHandle = () => {
  modalRef.value.closeModal();
  confirmLoading.value = false;
};
const modalSubmitHandle = () => {
  confirmLoading.value = true;
  const method = types.value === "add" ? "post" : "put";
  addRow<IFormState>("/system/menu", formState, method)
    .then(() => {
      emit("refresh", {});
      modalCancalHandle();
    })
    .catch(() => (confirmLoading.value = false));
};
</script>

<template>
  <JModal
    :title="types === 'add' ? '新增菜单' : '修改菜单'"
    ref="modalRef"
    :footer="null"
    :width="600"
  >
    <template #default>
      <a-form
        ref="formRef"
        layout="vertical"
        :model="formState"
        name="addForm"
        @finish="modalSubmitHandle"
      >
        <a-row :gutter="30">
          <template v-for="item in addOptions" :key="item">
            <a-col :span="12" v-if="!item.hide">
              <a-form-item
                :label="item.label"
                :name="item.field"
                :rules="item.rules"
              >
                <div v-if="item.type === 'custom'">
                  <a-tree-select
                    v-if="item.field === 'parentId'"
                    v-model:value="formState[item.field]"
                    :fieldNames="{
                      children: 'children',
                      label: 'menuName',
                      value: 'menuId',
                    }"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                    :tree-data="menuOptions"
                  ></a-tree-select>
                </div>
                <FormItem
                  v-model:value="formState[item.field]"
                  :option="item"
                  style="width: 100%"
                ></FormItem>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
        <div
          style="padding-bottom: 20px; display: flex; justify-content: flex-end"
        >
          <a-button @click="modalCancalHandle">取消</a-button>
          <a-button
            type="primary"
            style="margin-left: 10px"
            html-type="submit"
            :loading="confirmLoading"
          >
            确认
          </a-button>
        </div>
      </a-form>
    </template>
  </JModal>
</template>
